<template>
  <slot name="header"></slot>
  <form-item title="商户类别" v-if="!indexStore.is_general_agent">
    <el-select class="imWidth100" v-model="data.query.operated_ids" placeholder="请选择" filterable multiple @change="getCommercialList">
      <el-option label="全部" :value="-1" />
      <el-option class="flexBetween" v-for="item in indexStore.operatorArray" :key="item.value"
        :label="'【' + item.value + '】' + item.label" :value="item.value" v-show="item.status">
        【{{ item.value }}】{{ item.label }}
        <div>
          <el-tag size="small" v-if="item.type==1" type="danger" class="marginR2" style="font-size:10px;">测试</el-tag>
          <el-tag size="small" :type="item.value==1?'success':item.currency==1?'danger':'warning'" style="font-size:10px;">
            {{ item.value==1?'直营':item.currency==1?'多货币':'正常总代' }}
          </el-tag>
        </div>
      </el-option>
    </el-select>
  </form-item>
  <form-item title="商户" :pass="props.agentShow">
    <el-select class="imWidth100" v-model="data.query.agent_ids" placeholder="请选择" filterable multiple @change="chooseAgent">
      <el-option label="全部" :value="-1" />
      <el-option v-for="item in data.commercialArray" :key="item.id" :label="'【' + item.id + '】' + item.agent_name"
        :value="item.id" v-show="item.operator_status && item.status"/>
    </el-select>
  </form-item>
  <form-item title="游戏" :pass="true" value="game_ids" v-if="props.gameShow">
    <el-select class="imWidth100" v-model="data.query.game_ids" placeholder="请选择游戏" filterable multiple @change="chooseGame">
      <el-option label="全部" :value="-1" />
      <el-option v-for="item in data.gameList" :key="item.value" :label="'【' + item.value + '】' + item.label"
        :value="item.value" v-show="props.gameType==-1 ? true:item.type == props.gameType?true:false"/>
    </el-select>
  </form-item>
  <slot name="footer"></slot>
</template>

<script lang="ts" setup>
import { reactive, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { getAgentBatch } from '@/api/merchant'

import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  gameType: {
    type: Number,
    default: () => {
      return 1
    }
  },
  gameShow: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  agentShow: {
    type: Boolean,
    default: () => {
      return true
    }
  },
})

const data = reactive({
  query: {
    operated_ids: [-1],
    game_ids: [],
    agent_ids: [],
  },
  commercialArray: [] as any[],
  game_type: -1,
  gameList:indexStore.gameArray,
})

onMounted(async () => {
  getCommercialList([-1])
})

const emit = defineEmits(['query'])
watch(
  () => data.query,
  (to) => {
    emit('query', { ...data.query })
  },
  { deep: true, immediate: true }
)

// 选择总代-查询总代下所有商户
const getCommercialList = async (row: any) => {
  let operated_ids = [] as any[];
  const all = row.find((item: number) => item == -1)
  if (all) {
    data.query.agent_ids = [] as any
    indexStore.operatorArray.forEach((item:any)=>{
      operated_ids.push(item.value)
    })
    data.query.operated_ids = [-1] as any
  } else {
    data.query.operated_ids = row
  }
  data.query.agent_ids = []
  let res = await getAgentBatch({ operated_ids: all?operated_ids:data.query.operated_ids })
  data.commercialArray = res.data as any
}
// 选择商户
const chooseAgent = async (row: any) => {
  const all = row.find((item: number) => item == -1)
  if (all) {
    data.query.agent_ids = [-1] as any
  } else {
    data.query.agent_ids = row
  }
}

// 选择游戏
const chooseGame = async (row: any) => {
  const all = row.find((item: number) => item == -1)
  if (all) {
    data.query.game_ids = [-1] as any
  } else {
    data.query.game_ids = row
  }
}

const SetBatchControl = () => {
  // 选择全部
  let queryDetails = JSON.parse(JSON.stringify(data.query));
  const allAgent = data.query.agent_ids.find((item: number) => item == -1)
  const allGame = data.query.game_ids.find((item: number) => item == -1)
  if (allAgent) {
    queryDetails.agent_ids = []
    data.commercialArray.forEach((item: any) => {
      queryDetails.agent_ids.push(item.id)
    })
  }
  if (allGame) {
    queryDetails.game_ids = []
    indexStore.gameArray.forEach((item: any) => {
      if(item.type == props.gameType || props.gameType==-1){
        queryDetails.game_ids.push(item.value)
      }
    })
  }
  if(!queryDetails.agent_ids.length && props.agentShow){
    return ElMessage.error('请选择商户')
  }
  if (!queryDetails.game_ids.length && props.gameShow) {
    return ElMessage.error('请选择游戏')
  }
  return { agent_ids:queryDetails.agent_ids, game_ids:queryDetails.game_ids }
}

// 重置
const onHideDetails = () => {
  data.query = {
    operated_ids: [],
    game_ids: [],
    agent_ids: [],
  }
  getCommercialList([-1])
}
defineExpose({
  onHideDetails,
  SetBatchControl
})
</script>

<style lang="scss" scoped></style>